<template>
<el-container>
  <el-header style="background-color: white;color:black">
      <h1 align="center">用户权限管理界面</h1>
  </el-header>
  <el-main>
<!-- 用户表单 -->
<!-- <el-form  :inline="true" :model="queryForm" class="demo-form-inline">
  <el-form-item label="用户名">
    <el-input v-model="queryForm.userName" placeholder="输入用户名"></el-input>
  </el-form-item>
  <el-form-item label="用户电话">
    <el-input v-model="queryForm.userTel" placeholder="输入用户电话"></el-input>
  </el-form-item>
  <el-form-item label="用户邮件">
    <el-input v-model="queryForm.userEmail" placeholder="输入用户邮件"></el-input>
  </el-form-item>
  <el-form-item label="角色">
    <el-select v-model="queryForm.roleName" placeholder="请选择角色">
      <el-option label="超级管理员" value="admin"></el-option>
      <el-option label="普通管理员" value="simple"></el-option>
    </el-select>
  </el-form-item>
  <el-button style="margin-left: 20px;" type="success" size="primary" @click="loadData">查询用户</el-button>
</el-form> -->
        <!-- 表格组件-->
        <!-- :data 当前页集合-->
        <el-table :data="list" :row-key="rw" style="100%" @selection-change="selectVal">
          <!-- 列组件-->
          <!-- prop 对应当前页集合的对象属性 -->
           <el-table-column :reserve-selection="true" type="selection" width="100"></el-table-column>
           <el-table-column prop="roleId" label="角色编号" width="100"></el-table-column>
           <el-table-column prop="roleName" label="角色名" width="100"></el-table-column>
           <el-table-column prop="powerNames" label="角色权限" width="600"></el-table-column>
           <el-table-column label="操作">
             <template slot-scope="scope">
               <el-button
                 size="mini"
                 type="primary"
                 @click="update(scope.$index, scope.row)">修改权限</el-button>
             </template>
           </el-table-column>
        </el-table>
        <!-- 分页组件-->
        <el-pagination
        @size-change="select"
        @current-change="selectPage"
        :current-page="queryForm.page"
        :page-sizes="[3,5,20]"
        :page-size="queryForm.row"
        :total="total"
        layout="sizes,prev,pager,next,jumper,total"
        >
        </el-pagination>

        <!-- 对话框组件（修改权限） -->
        <el-dialog title="修改权限" :visible.sync="isShow" width="50%">
          <el-form :model="formData" label-width="80px">
            <el-form-item label="角色编号">
                <el-input v-model="formData.roleId"></el-input>
            </el-form-item>
            <el-form-item label="角色名">
                <el-input v-model="formData.roleName"></el-input>
            </el-form-item>
          <!--树形组件 -->
                <el-tree
                :data="treeData"
                :props="defaultProps"
                show-checkbox
                @node-click="handleNodeClick"
                node-key="nodeId"
                ref="tree">
                </el-tree>

            <el-form-item>
              <el-button type="primary" @click="onSubmit(0)">确定修改</el-button>
              <el-button @click="onSubmit(1)">取消</el-button>

            </el-form-item>
          </el-form>
        </el-dialog>



  </el-main>
</el-container>

</template>

<script>
    export default {
          name:"paperAdd",
          data(){
              return{
                  list:[],//当前页集合
                  totalPage:0,//总页数
                  total:0,//总条数
                  queryForm:{//查询表单
                      page:1,
                      row:3,
                      roleId:"",
                      roleName:"",
                      powerList:[]
                  },
                  isShow:false, //修用户的弹出框
                  formData:{ //用于修改
                    roleId:"",
                    roleName:"",
                    powerList:[]
                  },
                  treeData:[
                    {
                      nodeId:1,
                      "label":"用户管理",
                      children:[
                        {
                          nodeId:2,
                          label:"用户列表"
                        },
                        {
                          nodeId:3,
                          label:"用户信息管理"
                        },
                        {
                          nodeId:17,
                          label:"用户权限管理"
                        }
                      ]
                    },
                    {
                      nodeId:4,
                      label:"供货商信息管理",
                      children:[
                        {
                          nodeId:5,
                          "label":"供货商信息列表"
                        },
                        {
                          nodeId:18,
                          label:"供货商操作"
                        }
                      ]
                    },
                    {
                      nodeId:6,
                      label:"仓库信息管理",
                      children:[
                           {
                             nodeId:7,
                             label:"仓库列表",
                           },
                           {
                             nodeId:8,
                             label:"仓库管理"
                           }
                         ]
                    },
                    {
                      nodeId:9,
                      label:"库存信息管理",
                      children:[
                        {
                          nodeId:10,
                          label:"库存列表",
                        },
                        {
                          nodeId:11,
                          label:"库存操作"
                        }
                      ]
                    },
                    {
                      nodeId:12,
                      label:"商品信息管理",
                      children:[
                        {
                          nodeId:13,
                          label:"商品列表",
                        },
                        {
                          nodeId:14,
                          label:"商品操作",
                        },
                        {
                          nodeId:15,
                          label:"商品入库",
                        },
                        {
                          nodeId:16,
                          label:"商品销售记录"
                        },
                      ]
                    }
                  ],
                  defaultProps: {
                    lable:"lable",
                    children:"children",
                    nodeId:"nodeId"
                  },
                  resourceCheckedKey: []//需要回显的数据
              }
          },
          methods:{
              loadData(){//加载数据
                var self = this;
                var http =this.$http.get("/user/powerList",{params:this.queryForm});
                http.then(function(rs){
                    if(rs.data.code==200){
                          self.list = rs.data.data.list;
                          //总条数
                          self.total = rs.data.data.total;
                          //总页数
                          self.totalPage = rs.data.data.totalPage;
                    }else{
                      self.list=[];
                      self.total=0;
                    }
                })
              },
              select(row){//分页下拉框选中触发的事件,row是当前选中条数
                  this.queryForm.row = row;
                  //刷新
                  this.loadData();
              },
              selectPage(page){//选中页码触发的事件,page就是选中的页码
                this.queryForm.page = page;
                //刷新
                this.loadData();
              },
              selectVal(val){//表格的复选框选中触发的事件
                // console.log(val);
                this.selectIds = val;
              },
              rw(row){
                //设置需要保留的数据
                return row.userId;
              },

              update(index, row) {//用户数据回显
                //把当前行用户信息赋值给formData
                this.formData = row;
                this.isShow=true;
                //将后端穿过来得Ids字符串装换成数组
                var str = row.powerIds;
                var arr = str.split(",");
                this.resourceCheckedKey = arr;
                this.$nextTick(() => {
                    this.$refs.tree.setCheckedKeys(this.resourceCheckedKey);
                });
              },


              onSubmit(num) {
                if(num == 0){ //修改权限
                  var self = this;
                  var arr = this.$refs.tree.getCheckedKeys();
                  var str = arr.toString();
                  //获取当前的角色id
                  var roleId = this.formData.roleId;
                  var http =this.$http.get("/user/powerUpdate",{params:{"str":str,"roleId":roleId}});
                  http.then(function(rs){
                      if(rs.data.code==200){
                        self.$alert(rs.data.info);
                        self.isShow = false;
                      }else{
                        self.$alert(rs.data.info);
                        self.isShow = false;
                      }
                  })
                }
                if(num == 1){
                  this.isShow = false;
                }
              },
              handleNodeClick(data) { //树形控件
                console.log(data);
              },

          },
          mounted(){
            this.loadData();
            // this.showPaper();
          }
    }
</script>

<style>
</style>
